<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-if指令</title>
</head>

<body>
    <div id="app">
        <input type="button" value="点击切换隐藏和显示" @click="show" />
        <input type="button" value="点击增加年龄" @click="add" />

        <!-- 
            v-show指令 
            1.v-show="真假的表达式"，根据真假决定元素是显示否隐藏
            2.直接设置修改display的值
            3.频繁的切换隐藏与显示，则建议使用v-show指令
        -->
        <h1 style="color: cadetblue;" v-show="isShow">今天是阴天</h1>
        <!-- 
            v-if指令 
            1.v-if="真假的表达式"，根据真假决定元素是否存在
            2.直接将标签抹掉，在DOM树的元素移除 
        -->
        <h1 style="color: green;" v-if="isShow">今天是阴天</h1>

        <img src="./image/1.jpg" v-show="age>=18" />
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                isShow:false,
                age:16
            },
            methods:{
                show(){
                    this.isShow = !this.isShow
                },
                add(){
                    this.age++
                }
            }
        })
    </script>
</body>

</html>